<%-- 
    Document   : validation
    Created on : Oct 7, 2013, 9:28:44 PM
    Author     : jfrodriguez
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="keywords" content="struts2, twitter, bootstrap, plugin, showcase" />
        <meta name="description" content="A Showcase for the Struts2 Bootstrap Plugin" />

        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--        [if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    <sj:head jqueryui="false"/>
    <sb:head includeScripts="true" includeScriptsValidation="true"/>

    <style type="text/css">
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="i-bar"></span>
                    <span class="i-bar"></span>
                    <span class="i-bar"></span>
                </a>
                <a class="brand" href="#">Struts2 Bootstrap Plugin Showcase - <s:text name="showcase.version"/></a>

                <div class="nav-collapse">
                    <ul class="nav">
                        <s:url var="index_url" action="index"/>
                        <li class="active"><s:a href="%{index_url}">Home</s:a></li>
                        <s:url var="about_url" action="about"/>
                        <li><s:a href="%{about_url}">About</s:a></li>
                        <li><a href="http://code.google.com/p/struts2-bootstrap/">Project</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <div class="well sidebar-nav">
                    <ul class="nav nav-list">
                        <li class="nav-header">
                            Form Layouts
                        </li>
                        <s:url var="index_url" action="index"/>
                        <li><s:a href="%{index_url}">Horizontal Form Layout</s:a></li>
                        <s:url var="vertical_url" action="vertical"/>
                        <li><s:a href="%{vertical_url}">Vertical Form Layout</s:a></li>
                        <s:url var="validation_url" action="validation"/>
                        <li class="active"><s:a href="%{validation_url}">Client Validation</s:a></li>
                        <s:url var="advanced_url" action="advanced"/>
                        <li><s:a href="%{advanced_url}">Advanced Examples</s:a></li>
                        <s:url var="jquery_url" action="jquery"/>
                        <li><s:a href="%{jquery_url}">Struts2 jQuery UI Form Elements</s:a></li>
                        <s:url var="custom_url" action="custom"/>
                        <li><s:a href="%{custom_url}">With Custom Theme</s:a></li>
                    </ul>
                </div>
            </div>
            <div class="span9">

                <h1>Client Validation</h1>

                <p>Struts2 Bootstrap Plugin Example with Client Validation.</p>

                <s:actionerror theme="bootstrap"/>
                <s:actionmessage theme="bootstrap"/>
                <s:fielderror theme="bootstrap"/>


                <s:form id="validationForm" action="validation-submit" theme="bootstrap" cssClass="form-horizontal" label="A sample Registration Form">

                    <s:textfield
                        label="Username"
                        name="user"
                        tooltip="Enter your Username here"/>

                    <s:password
                        label="Password"
                        name="password"
                        tooltip="Enter your Password here"/>

                    <s:textarea
                        tooltip="Enter your Biography"
                        label="Biography"
                        name="biograhy"
                        cols="20"
                        rows="3"/>

                    <s:select
                        tooltip="Choose Your Favourite Color"
                        label="Favorite Color"
                        list="{'Red', 'Blue', 'Green'}"
                        name="favourite"
                        emptyOption="true"/>

                    <s:checkbox
                        tooltip="Confirmed that you accept the Agreement"
                        label="Accept the Agreement?"
                        name="agree"/>

                    <div class="form-actions">
                        <sj:submit cssClass="btn btn-inverse" formIds="validationForm" validate="true" validateFunction="bootstrapValidation"/>
                    </div>

                </s:form>
            </div>
        </div>

        <footer class="footer">
            <p class="pull-right"><a href="#">Back to top</a></p>

            <p>Created by <a href="http://twitter.com/jogep" target="_blank">@jogep</a>.</p>
        </footer>

    </div>
    <!-- /container -->
</body>
</html>
